doctype html
html
   head
      title= 'Register New User'
      meta(name="viewport", content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no")
      link(href='/css/bootstrap.min.css', rel='stylesheet')

   body
      div.container(style='width: 400px; margin: 160px auto;')
         h1= message
         form.well(method="post")
            h1 Welcome!
            p Please Signup an Account

            //input(type='hidden', name='_csrf', value={csrf})

            div.input-group(style='width: 100%;')
               input.form-control(type='text', placeholder='FirstName', name='firstname', data-validation='least_one_char')

            div.input-group(style='width: 100%;')
               input.form-control(type='text', placeholder='LastName', name='lastname', data-validation='least_one_char')

            div.input-group(style='width: 100%;')
               input.form-control(type='text', placeholder='Email', name='email', data-validation='email')

            div.input-group(style='width: 100%;')
               input.form-control(type='password', placeholder='Password', name='password', data-validation='my_password')

            div.input-group(style='width: 100%;')
               button.btn.btn-primary.form-control(type="submit")
                  i.icon-lock.icon-white Register

            hr
            ol.breadcrumb
               li: a(href='/') Back
               li: a(href='/users/login') Login


      script(src='/js/jquery.min.js')
      script(src='/js/bootstrap.min.js')
      script(src='/js/form-validator/jquery.form-validator.min.js')
      script.
         $.formUtils.addValidator({
            name: 'least_one_char',
            validatorFunction: function(value, $el, config, language, $form){
               return /^(?=.*[a-zA-Z]).{1,20}$/i.test(value);
            },
            errorMessage: 'The input has to be an alphabet value between 1-20 characters',
            errorMessageKey: 'badLetter'
         });
         $.formUtils.addValidator({
            name: 'my_password',
            validatorFunction: function(value, $el, config, language, $form){
               return /^(?=.*[a-zA-Z])(?=.*[0-9]).{4,20}$/i.test(value);
            },
            errorMessage: 'The password should consists of at least 1 letter and at least 1 number and between 4-20 characters',
            errorMessageKey: 'badPassword'
         });

         $.validate();


// Regex:
//
// ^
// (               # start a group
//   (?=.*[A-Z])   # at least one cap letter
//   (?=.*[0-9])   # at least one num
// )
// .{4,20}         # min 4, max 20 chars
// $
//
